<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>梁先生</title>
    <script>
//        若设备为移动设备，则跳转加载移动端样式
        if((/(android|iphone|ipad|PlayBook|BB10)/i).test(window.navigator.userAgent)){
            window.location.href = 'm/index.htm';
        }
</script>
    <style>
      /** {
        border: 1px solid red;
      }*/

      body {
        margin: 0;
        background-color: #322e2e39;
      }
      .flex {
        display: flex;
      }
      .zhuYeMianTu {
        background: url(https://img-blog.csdnimg.cn/20200718094906390.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        height: 60vh;
      }
      .yinYing {
        box-shadow: 2px 4px 6px #000;
      }
      .zongXiangPaiLie {
        flex-direction: column;
      }
      .ziTiYanSe1 {
        color: white;
      }
      .neirong {
        height: 100vh;
      }
      .touBuLan {
        height: 50px;
        width: 100%;
      }
      .ziTiJuZhong {
        text-align: center;
      }
      .flex1 {
        flex: 1;
      }
      .flex3 {
        flex: 3;
      }
      .flex5 {
        flex: 5;
      }
      .zongXiangJuZhong {
        align-items: center;
      }
      .zhuTiZiTi {
        font-size: 40px;
        font-family: 微软雅黑;
      }
      header {
        width: 100%;
        /* background-color: #f1f1f1; */
        position: fixed;
        top: 0;
      }
      .hengXiangJuZhong {
        justify-content: center;
      }
      .boxSIXE {
        height: 25vmin;
        display: flex;
        border-radius: 1em;
        margin: 32px;
        width: 90vmin;
      }

      .shiPingWeiHang {
        justify-content: flex-start;
      }
      .shiLiangTu {
        height: 30px;
        margin-left: 32px;
        margin-right: 32px;
      }
      .neiRongBeiJingTu {
        width: 90vw;
        position: absolute;
        opacity: 1;
        z-index: -1;
        border-radius: 1em;
      }
      .moHuXiaoGuo {
        backdrop-filter: blur(20px);
        background-color: rgba(255, 255, 255, 0.5);
        height: 25vh;
        width: 60vw;
      }
      .qingXiXiaoTu {
        border-radius: 1em;
      }
      .zuoBianHu {
        border-top-left-radius: 1em;
        border-bottom-left-radius: 1em;
      }
      .youBianHu {
        border-top-right-radius: 1em;
        border-bottom-right-radius: 1em;
      }
      /*屏幕宽度小于600px,改变布局和样式*/
      @media screen and (max-width: 600px) {
        header .search {
          width: 100%;
        }
        .banner .image {
          margin-top: 30px;
        }
      }
    </style>
  </head>
  <body class="flex zongXiangPaiLie">
    <!-- 主页面 -->
    <div class="zhuYeMianTu flex zongXiangPaiLie">
      <!-- 头部栏 -->
      <header>
        <div
          style="height: 50px; justify-content: space-between"
          class="zongXiangJuZhong flex"
        >
          <!-- 头像 -->
          <div class="shiPingWeiHang flex zongXiangJuZhong">
            <img
              style="height: 40px; margin-left: 32px"
              src="img/touxiang.jpg"
              alt=""
            />
            <div style="margin-left: 8px">梁先生</div>
          </div>
          <!-- 矢量图 -->
          <div class="shiPingWeiHang flex">
            <img
              title="首页"
              class="shiLiangTu"
              src="img/home.png"
              alt="首页"
            />
            <img
              title="友情链接"
              class="shiLiangTu"
              src="img/link-two.png"
              alt="链接"
            />
            <a href="mingpian/index.html">
            <img
              title="博主"
              class="shiLiangTu"
              src="img/me.png"
              alt="博主"
            /></a>
          </div>
        </div>
      </header>
      <!-- 主题 -->
      <div class="flex ziTiJuZhong flex3 zongXiangPaiLie ziTiYanSe1 yinYing">
        <!-- 梁先生′s博客 -->
        <div style="margin-top: 20vh" class="zhuTiZiTi">
          <b>Liang</b>
        </div>
        <div>
          <p style="margin-top: 10px">
            <span class="text"></span>
          </p>
          <script
            type="text/javascript"
            src="js/ziTiShanChu.js"
          ></script>
        </div>
        <div class="shiPingWeiHang" style="align-items: flex-end">
          <img
            title="2761884139"
            class="shiLiangTu"
            src="img/qq.png"
            alt="QQ"
          />
          <img
            title="L-SJ6616"
            class="shiLiangTu"
            src="img/wechat.png"
            alt="微信"
          />
          <img
            title="2761884139@qq.com"
            class="shiLiangTu"
            src="img/mail.png"
            alt="邮箱"
          />
        </div>
      </div>
    </div>
    <!-- 内容 -->
    <div class="zongXiangPaiLie flex zongXiangJuZhong">
      <!--  -->
      <div
        class="boxSIXE"
        style="
          background-size: cover;
          background: url(img/xuexi.png);
        "
      >
        <div
          style="width: 60vmax; height: 25vmin"
          class="moHuXiaoGuo zuoBianHu flex zongXiangPaiLie hengXiangJuZhong"
        >
          <div style="margin-left: 64px; padding: 0">
            <b>第一次编程，做网站</b>
            <p>2022-09-10</p>
            <p>
              在抖音刷到了康文昌老师的视频，受益良多，开始学习制作自己的网站
            </p>
          </div>
        </div>

        <img
          class="youBianHu"
          style="width: 30vmin"
          src="img/xuexi1.png"
          alt=""
        />
      </div>
      <!--  -->
      <div
        class="boxSIXE"
        style="
          background-size: cover;
          background: url(img/tongZhiShu.jpg);
        "
      >
        <img
          class="zuoBianHu"
          style="width: 30vmin"
          src="img/tongZhiShu1.jpg"
          alt=""
        />
        <div
          style="width: 60vmax; height: 25vmin"
          class="moHuXiaoGuo youBianHu flex zongXiangPaiLie hengXiangJuZhong"
        >
          <div style="margin-right: 64px; text-align: right; padding: 0">
            <b>被录取</b>
            <p>2022-09-01</p>
            <p>在八月份收到录取通知书，不枉我一年的努力</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 底部栏 -->
    <div
      style="height: 70px; background-color: #f1f1f1; text-align: center"
      class="zongXiangPaiLie hengXiangJuZhong flex"
    >
      <a
        href="https://www.baidu.com/"
        style="color: black; text-decoration: none"
        >点我</a
      >
    </div>
  </body>
</html>
